<template>
  <div class="content-area">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <div class="welcome-main">
        <div class="welcome-text">
          <div class="welcome-title">早上好，{{ username }}医生！</div>
          <div class="welcome-subtitle">
            今天您有 {{ todayStats.totalAppointments }} 个预约，其中
            {{ todayStats.pending }} 个待处理
          </div>
        </div>
        <div class="welcome-actions">
          <el-button @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </div>
    </div>

    <!-- 核心功能卡片 -->
    <div class="quick-actions">
      <el-card shadow="never" class="quick-action-card">
        <div class="action-item" @click="handleCreateDiagnosis">
          <div class="action-icon diagnosis">
            <el-icon><DocumentAdd /></el-icon>
          </div>
          <div class="action-text">
            <div class="action-title">新建诊断</div>
            <div class="action-desc">开始问诊记录</div>
          </div>
        </div>
      </el-card>

      <el-card shadow="never" class="quick-action-card">
        <div class="action-item" @click="$router.push('/doctor/prescription')">
          <div class="action-icon prescription">
            <el-icon><Memo /></el-icon>
          </div>
          <div class="action-text">
            <div class="action-title">开具处方</div>
            <div class="action-desc">药品处方管理</div>
          </div>
        </div>
      </el-card>

      <el-card shadow="never" class="quick-action-card">
        <div
          class="action-item"
          @click="$router.push('/doctor/examination-orders')"
        >
          <div class="action-icon examination">
            <el-icon><Search /></el-icon>
          </div>
          <div class="action-text">
            <div class="action-title">检查开具</div>
            <div class="action-desc">安排检验检查</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 叫号卡片 -->
    <div class="call-card">
      <div class="call-header">
        <h3>当前叫号</h3>
        <div class="call-actions">
          <el-button
            type="success"
            @click="currentPatient"
            :disabled="!currentPatientInfo"
          >
            <el-icon><Refresh /></el-icon>
            <span>再次叫号</span>
          </el-button>
          <el-button
            type="primary"
            @click="callNextPatient"
            :disabled="!hasWaitingPatients"
          >
            <el-icon><Microphone /></el-icon>
            <span>叫下一位</span>
          </el-button>
          <el-button
            type="warning"
            @click="skipCurrentAndCallNext"
            :disabled="!currentPatientInfo"
          >
            <el-icon><ArrowRight /></el-icon>
            <span>跳过当前</span>
          </el-button>
        </div>
      </div>

      <div class="current-patient-info" v-if="currentPatientInfo">
        <div class="patient-basic">
          <div class="patient-avatar">
            <el-icon><User /></el-icon>
          </div>
          <div class="patient-details">
            <div class="patient-name">{{ currentPatientInfo.name }}</div>
            <div class="patient-meta">
              {{ currentPatientInfo.queueNumber }} ·
              {{ currentPatientInfo.patientType }} ·
              {{ currentPatientInfo.registrationTime }}
            </div>
          </div>
        </div>
        <div class="patient-actions">
          <el-button
            type="primary"
            size="small"
            @click="handleStartDiagnosis(currentPatientInfo)"
          >
            开始诊断
          </el-button>
        </div>
      </div>

      <div class="no-patient" v-else>
        <div class="empty-state">
          <el-icon><User /></el-icon>
          <p>当前没有就诊中的患者</p>
        </div>
      </div>

      <div class="waiting-queue">
        <div class="waiting-header">
          <span>等待队列 ({{ waitingCount }}人)</span>
          <el-button type="text" @click="showQueueDrawer = true">
            查看全部
          </el-button>
        </div>
        <div class="waiting-list">
          <div
            v-for="patient in waitingPatients"
            :key="patient.id"
            class="waiting-item"
          >
            <div class="waiting-patient">
              <span class="patient-name">{{ patient.name }}</span>
              <span class="patient-meta"
                >{{ patient.queueNumber }} · {{ patient.patientType }}</span
              >
            </div>
            <div class="waiting-time">{{ patient.registrationTime }}</div>
          </div>
          <div v-if="waitingCount === 0" class="empty-waiting">
            暂无等待患者
          </div>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-section">
      <h3 class="section-title">今日数据统计</h3>
      <div class="stats-cards">
        <el-card shadow="never" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon today-appointments">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ todayStats.totalAppointments }}</div>
              <div class="stat-label">今日预约</div>
              <div class="stat-trend positive" v-if="todayStats.increase > 0">
                +{{ todayStats.increase }}个
              </div>
            </div>
          </div>
        </el-card>

        <el-card shadow="never" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon completed">
              <el-icon><Checked /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ todayStats.completed }}</div>
              <div class="stat-label">已完成</div>
              <div class="stat-desc">已完成就诊</div>
            </div>
          </div>
        </el-card>

        <el-card shadow="never" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon pending">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ todayStats.pending }}</div>
              <div class="stat-label">待处理</div>
              <div class="stat-desc">等待处理</div>
            </div>
          </div>
        </el-card>

        <el-card shadow="never" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon diagnosis-count">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ todayStats.diagnosisCount }}</div>
              <div class="stat-label">诊断记录</div>
              <div class="stat-desc">今日新增</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 新建诊断对话框 -->
    <el-dialog v-model="diagnosisDialogVisible" width="90%" top="5vh">
      <DiagnosisEdit
        v-if="diagnosisDialogVisible"
        :is-edit="false"
        :patient-info="selectedPatientInfo"
        @close="diagnosisDialogVisible = false"
        @saved="handleDiagnosisSaved"
      />
    </el-dialog>

    <!-- 等待队列抽屉 -->
    <el-drawer
      v-model="showQueueDrawer"
      title="患者等待队列"
      direction="rtl"
      size="500px"
    >
      <div class="queue-drawer-content">
        <div class="queue-summary">
          <div class="summary-item">
            <span class="label">总等待人数</span>
            <span class="value">{{ waitingCount + calledCount }}</span>
          </div>
          <div class="summary-item">
            <span class="label">预计等待时间</span>
            <span class="value"
              >约{{ Math.ceil((waitingCount + calledCount) * 15) }}分钟</span
            >
          </div>
        </div>

        <div class="full-queue-list">
          <!-- 修改这里：显示 waiting 和 called 状态的患者 -->
          <div
            v-for="patient in patients.filter(
              (p) => p.status === 'waiting' || p.status === 'called'
            )"
            :key="patient.id"
            class="queue-item"
            :class="{
              'next-patient': patient.id === nextPatientInfo?.id,
              'current-patient': patient.status === 'called',
            }"
          >
            <div class="queue-item-main">
              <div class="patient-avatar">
                <el-icon><User /></el-icon>
              </div>
              <div class="patient-info">
                <div class="patient-name">
                  {{ patient.name }}
                  <el-tag
                    v-if="patient.status === 'called'"
                    type="success"
                    size="small"
                    style="margin-left: 8px"
                  >
                    就诊中
                  </el-tag>
                  <el-tag
                    v-else
                    type="info"
                    size="small"
                    style="margin-left: 8px"
                  >
                    等待中
                  </el-tag>
                </div>
                <div class="patient-details">
                  {{ patient.queueNumber }} · {{ patient.patientType }}
                </div>
                <div class="appointment-info">
                  {{ patient.registrationTime }}
                </div>
              </div>
            </div>
            <div class="queue-item-actions">
              <el-tag
                v-if="
                  patient.id === nextPatientInfo?.id &&
                  patient.status === 'waiting'
                "
                type="success"
                size="small"
              >
                下一位
              </el-tag>
              <el-button
                v-if="patient.status === 'waiting'"
                type="primary"
                link
                size="small"
                @click="handleCallPatientFromDrawer(patient)"
              >
                立即叫号
              </el-button>
              <el-button
                v-if="patient.status === 'called'"
                type="primary"
                size="small"
                @click="handleStartDiagnosis(patient)"
              >
                开始诊断
              </el-button>
            </div>
          </div>
          <div v-if="waitingCount + calledCount === 0" class="empty-queue">
            <el-empty description="暂无等待患者" :image-size="80" />
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElNotification, ElMessage, ElEmpty } from "element-plus";
import DiagnosisEdit from "@/components/doctor/DiagnosisEdit.vue";
// 引入API接口
import {
  getTodayPatientList,
  updatePatientStatus,
  updatePatientVisitStatus,
} from "@/api/doctor.js";

const router = useRouter();
const store = useStore();

// 响应式数据
const username = ref(store.state.user?.doctor_name || "张医生");
const userDepartment = ref(store.state.user?.department_name || "内科");
const diagnosisDialogVisible = ref(false);
const showQueueDrawer = ref(false);
const selectedPatientInfo = ref(null);
const loading = ref(false);

// 患者队列数据 - 从API获取
const patients = ref([]);

// 统计数据
const todayStats = reactive({
  totalAppointments: 0,
  completed: 0,
  pending: 0,
  increase: 0,
  diagnosisCount: 0,
});

// 数据转换函数 - 根据新的数据结构修改
const transformPatientData = (apiData) => {
  return apiData.map((item) => {
    // 状态映射：后端状态 -> 前端状态
    let status = "waiting";
    if (item.visit_status === "in_consultation") {
      status = "called";
    } else if (item.visit_status === "completed") {
      status = "completed";
    } else if (item.visit_status === "cancelled") {
      status = "cancelled";
    }

    // 时间格式化
    const registrationTime = formatTime(item.registration_time);

    // 通过身份证号计算年龄
    const patientAge = calculateAgeFromIDCard(item.id_number);

    return {
      id: item.visit_id,
      name: item.patient_name,
      age: patientAge, // 添加计算出的年龄
      status: status,
      queueNumber: item.appointment_id,
      patientType: mapInsuranceType(item.insurance_card_number),
      registrationTime: registrationTime,
      idNumber: item.id_number, // 保留身份证号
      // 保留原始数据用于诊断
      rawData: item,
    };
  });
};

// 时间格式化函数
const formatTime = (timeString) => {
  if (!timeString) return "";
  const date = new Date(timeString);
  return date.toLocaleTimeString("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
  });
};

// 医保类型映射
const mapInsuranceType = (insuranceNumber) => {
  if (!insuranceNumber || insuranceNumber === "") {
    return "自费";
  }
  // 根据实际业务逻辑映射，这里简单示例
  if (insuranceNumber.length > 0) {
    return "医保";
  }
  return "自费";
};

// 更新统计信息
const updateTodayStats = (patientList) => {
  todayStats.totalAppointments = patientList.length;
  todayStats.completed = patientList.filter(
    (p) => p.status === "completed"
  ).length;
  todayStats.pending = patientList.filter((p) => p.status === "waiting").length;
  todayStats.diagnosisCount = todayStats.completed; // 简化处理，已完成就诊数作为诊断记录数
};

// 计算属性
const currentPatientInfo = computed(() => {
  return patients.value.find((p) => p.status === "called");
});

const nextPatientInfo = computed(() => {
  return patients.value.find((p) => p.status === "waiting");
});

const waitingPatients = computed(() => {
  return patients.value.filter((p) => p.status === "waiting").slice(0, 3);
});

const waitingCount = computed(() => {
  return patients.value.filter((p) => p.status === "waiting").length;
});

// 新增：统计正在就诊的患者数量
const calledCount = computed(() => {
  return patients.value.filter((p) => p.status === "called").length;
});

const hasWaitingPatients = computed(() => waitingCount.value > 0);

// 叫号相关方法
const callNextPatient = async () => {
  // 添加空队列检查
  if (!hasWaitingPatients.value) {
    ElMessage.warning("没有等待就诊的患者");
    return;
  }

  const nextPatient = patients.value.find((p) => p.status === "waiting");
  if (nextPatient) {
    // 更新当前患者状态
    const currentPatient = patients.value.find((p) => p.status === "called");
    if (currentPatient) {
      // 将当前患者状态更新为已完成
      await updateVisitStatus(currentPatient.id, "completed");
    }

    // 设置新患者为就诊中
    await updateVisitStatus(nextPatient.id, "in_consultation");

    ElNotification({
      title: "叫号成功",
      message: `请 ${nextPatient.name} 到1号诊室就诊`,
      type: "success",
      duration: 3000,
    });

    await speak(`请 ${nextPatient.name} 到1号诊室就诊`);
  } else {
    ElMessage.warning("没有等待就诊的患者");
  }
};

const currentPatient = async () => {
  if (currentPatientInfo.value) {
    ElNotification({
      title: "再次叫号",
      message: `请 ${currentPatientInfo.value.name} 到1号诊室就诊`,
      type: "info",
      duration: 3000,
    });

    await speak(`请 ${currentPatientInfo.value.name} 到1号诊室就诊`);
  } else {
    ElMessage.warning("当前没有正在就诊的患者");
  }
};

const skipCurrentAndCallNext = async () => {
  if (currentPatientInfo.value) {
    const skippedPatient = currentPatientInfo.value;

    // 将当前患者状态更新为已挂号（放回等待队列）
    await updateVisitStatus(skippedPatient.id, "registered");

    ElMessage.info(`已跳过 ${skippedPatient.name}，将其移至队列末尾`);

    // 叫下一位患者
    await callNextPatient();
  } else {
    ElMessage.warning("当前没有正在就诊的患者");
  }
};

const handleCallPatientFromDrawer = async (patient) => {
  const currentPatient = patients.value.find((p) => p.status === "called");
  if (currentPatient) {
    // 将当前患者状态更新为已完成
    await updateVisitStatus(currentPatient.id, "completed");
  }

  // 设置选中的患者为就诊中
  await updateVisitStatus(patient.id, "in_consultation");

  ElNotification({
    title: "叫号成功",
    message: `请 ${patient.name} 到1号诊室就诊`,
    type: "success",
  });

  await speak(`请 ${patient.name} 到1号诊室就诊`);
  showQueueDrawer.value = false;
};

// 更新就诊状态的方法
const updateVisitStatus = async (visitId, status) => {
  try {
    // 调用更新状态的API
    await updatePatientStatus(visitId, status);

    // 本地更新状态
    const patient = patients.value.find((p) => p.id === visitId);
    if (patient) {
      if (status === "in_consultation") {
        patient.status = "called";
      } else if (status === "completed") {
        patient.status = "completed";
      } else if (status === "registered") {
        patient.status = "waiting";
        // 如果是放回等待队列，移到队列末尾
        const currentIndex = patients.value.findIndex((p) => p.id === visitId);
        if (currentIndex !== -1) {
          patients.value.splice(currentIndex, 1);
          patients.value.push(patient);
        }
      }
    }

    // 更新统计信息
    updateTodayStats(patients.value);

    return true;
  } catch (error) {
    console.error("更新状态失败:", error);
    ElMessage.error("更新状态失败");
    return false;
  }
};

// 诊断相关方法
const handleCreateDiagnosis = () => {
  selectedPatientInfo.value = null;
  diagnosisDialogVisible.value = true;
};

// 开始诊断
const handleStartDiagnosis = async (patientInfo) => {
  // 使用原始数据传递完整患者信息
  selectedPatientInfo.value = {
    ...patientInfo.rawData,
    patient_name: patientInfo.name,
    patient_age: patientInfo.age, // 使用计算出的年龄
    patient_gender: getGenderFromIDCard(patientInfo.idNumber), // 可选：从身份证获取性别
    id_number: patientInfo.idNumber,
    // 就诊信息
    visit_status: "in_consultation",
    visit_id: patientInfo.rawData.visit_id,
    // 保留原始数据用于后续处理
    rawData: patientInfo.rawData,
  };

  // 更新患者状态为就诊中
  const res = await updatePatientVisitStatus(selectedPatientInfo.value);
  // console.log("更新患者就诊状态响应:", res);

  if (res && res.code == 200) {
    ElMessage.success(`开始为患者 ${patientInfo.name} 进行诊断`);
  }

  diagnosisDialogVisible.value = true;
};

// 根据身份证号获取性别
const getGenderFromIDCard = (idNumber) => {
  if (!idNumber || idNumber.length !== 18) {
    return "未知";
  }

  // 第17位是性别标识，奇数为男性，偶数为女性
  const genderDigit = parseInt(idNumber.charAt(16));
  return genderDigit % 2 === 1 ? "男" : "女";
};

// 根据身份证号计算年龄
const calculateAgeFromIDCard = (idNumber) => {
  if (!idNumber || idNumber.length !== 18) {
    return null;
  }

  try {
    // 提取出生年月日：第7-14位
    const birthYear = parseInt(idNumber.substring(6, 10));
    const birthMonth = parseInt(idNumber.substring(10, 12)) - 1; // 月份从0开始
    const birthDay = parseInt(idNumber.substring(12, 14));

    const birthDate = new Date(birthYear, birthMonth, birthDay);
    const today = new Date();

    let age = today.getFullYear() - birthDate.getFullYear();

    // 如果今年生日还没过，年龄减1
    const currentMonth = today.getMonth();
    const currentDay = today.getDate();

    if (
      currentMonth < birthMonth ||
      (currentMonth === birthMonth && currentDay < birthDay)
    ) {
      age--;
    }

    return age;
  } catch (error) {
    console.error("身份证号解析错误:", error);
    return null;
  }
};

const handleDiagnosisSaved = (resData,shouldClose) => {
  diagnosisDialogVisible.value = shouldClose ? false : true;
  selectedPatientInfo.value = null;
  refreshData();
  // ElMessage.success("诊断记录保存成功");
};

// 刷新数据
const refreshData = async () => {
  try {
    loading.value = true;
    const doctorId = store.state.user?.user_id; // 所有角色的id字段统一映射为user_id
    if (!doctorId) {
      ElMessage.error("无法获取医生信息");
      return;
    }

    const response = await getTodayPatientList({ doctor_id: doctorId });

    console.log("获取到的患者数据:", response.data);

    patients.value = transformPatientData(response.data);

    // 更新统计数据
    updateTodayStats(patients.value);

    // ElMessage.success("数据已刷新");
  } catch (error) {
    console.error("刷新数据失败:", error);
    ElMessage.error("刷新数据失败");
  } finally {
    loading.value = false;
  }
};

// 语音合成函数
const speak = async (text) => {
  try {
    const response = await fetch(
      `http://127.0.0.1:9882/kokoro?text=${encodeURIComponent(text)}`
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const audioBlob = await response.blob();
    const audioUrl = URL.createObjectURL(audioBlob);
    const audio = new Audio(audioUrl);
    audio.play();
  } catch (error) {
    console.error("语音合成失败,降级调用浏览器内置语音合成功能:", error);
    //尝试使用浏览器内置的语音合成功能
    if ("speechSynthesis" in window) {
      const utterance = new SpeechSynthesisUtterance(text);
      speechSynthesis.speak(utterance);
    }
  }
};

onMounted(() => {
  // 初始化时加载数据
  refreshData();
});
</script>

<style lang="scss" scoped>
.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: #f5f7fa;
  height: 0;
  min-height: 100%;
}

.welcome-card {
  background: linear-gradient(135deg, #1a75bc 0%, #0c4d8c 100%);
  border-radius: 12px;
  padding: 24px;
  color: white;
  margin-bottom: 24px;
}

.welcome-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text {
  .welcome-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .welcome-subtitle {
    opacity: 0.9;
    font-size: 16px;
  }
}

.welcome-actions {
  display: flex;
  gap: 12px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.quick-action-card {
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.action-item {
  display: flex;
  align-items: center;
  padding: 16px;
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
  font-size: 20px;

  &.diagnosis {
    background: #67c23a;
  }
  &.prescription {
    background: #e6a23c;
  }
  &.examination {
    background: #f56c6c;
  }
}

.action-text {
  .action-title {
    font-weight: 600;
    margin-bottom: 4px;
  }

  .action-desc {
    color: #909399;
    font-size: 12px;
  }
}

.call-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.call-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    margin: 0;
    font-size: 18px;
    color: #303133;
  }
}

.call-actions {
  display: flex;
  gap: 12px;
}

.current-patient-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.no-patient {
  padding: 40px 20px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;

  .empty-state {
    color: #909399;

    .el-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    p {
      margin: 0;
      font-size: 14px;
    }
  }
}

.patient-basic {
  display: flex;
  align-items: center;
  flex: 1;
}

.patient-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
  font-size: 20px;
}

.patient-details {
  .patient-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .patient-meta {
    color: #606266;
    font-size: 14px;
  }
}

.waiting-queue {
  .waiting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .waiting-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.waiting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;

  .waiting-patient {
    .patient-name {
      font-weight: 500;
      margin-right: 8px;
    }

    .patient-meta {
      color: #909399;
      font-size: 12px;
    }
  }

  .waiting-time {
    color: #909399;
    font-size: 12px;
  }
}

.empty-waiting {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.stats-section {
  margin-top: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #303133;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  .stat-content {
    display: flex;
    align-items: center;
  }

  .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 24px;
    color: white;

    &.today-appointments {
      background: #409eff;
    }
    &.completed {
      background: #67c23a;
    }
    &.pending {
      background: #e6a23c;
    }
    &.diagnosis-count {
      background: #f56c6c;
    }
  }

  .stat-info {
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .stat-label {
      color: #606266;
      margin-bottom: 2px;
    }

    .stat-desc {
      color: #909399;
      font-size: 12px;
    }

    .stat-trend {
      font-size: 12px;
      &.positive {
        color: #67c23a;
      }
    }
  }
}

// 抽屉内容样式
.queue-drawer-content {
  padding: 0 20px;
}

.queue-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;

  .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .label {
      font-size: 12px;
      color: #909399;
      margin-bottom: 4px;
    }

    .value {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }
}

.full-queue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s;

  &.next-patient {
    border-color: #67c23a;
    background: #f0f9ff;
  }

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.queue-item.current-patient {
  border-color: #67c23a;
  background: #f0f9ff;
  border-left: 4px solid #67c23a;
}

.queue-item.next-patient {
  border-color: #409eff;
  background: #f0f9ff;
  border-left: 4px solid #409eff;
}

.queue-item-main {
  display: flex;
  align-items: center;
  flex: 1;
}

.patient-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 16px;
}

.patient-info {
  .patient-name {
    font-weight: 600;
    margin-bottom: 4px;
  }

  .patient-details {
    color: #606266;
    font-size: 12px;
    margin-bottom: 2px;
  }

  .appointment-info {
    color: #909399;
    font-size: 12px;
  }
}

.queue-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-queue {
  padding: 40px 0;
}

@media (max-width: 768px) {
  .welcome-main {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .current-patient-info {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .call-actions {
    flex-wrap: wrap;
  }

  .stats-cards {
    grid-template-columns: 1fr 1fr;
  }
}
</style>